<html>
<head>
<title>ReadyMap WebGL</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="../js/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../js/jquery/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="../build/readymap.js"></script>

<link href="demo.css" rel="Stylesheet" type="text/css"></link>
<link href="../css/ui-lightness/jquery.ui.all.css" rel="stylesheet" type="text/css"></link>
<link href="../css/readymap.css" rel="Stylesheet" type="text/css"></link>

<script type="text/javascript">

var map;
var layerSwitcher;
var mapView;

ReadyMap.init(function() {
    // create a map model:
    map = new ReadyMap.Map();

    map.addImageLayer(new ReadyMap.TMSImageLayer({
        name: "Landsat",
        url: "http://readymap.org/readymap/tiles/1.0.0/22/",
        imageType: "jpeg"
    }));

    map.addImageLayer(new ReadyMap.TMSImageLayer({
        name: "OSM",
        url: "http://readymap.org/readymap/tiles/1.0.0/35/",
        imageType: "png"
    }));

    // create a view tied to a page element:
    var size = ReadyMap.getWindowSize();
    var headerHeight = jQuery('#header').height();
    size.h -= headerHeight;
    mapView = new ReadyMap.MapView("3DView", size, map);

    //Add some controls
    var zoom = new ReadyMap.Controls.Zoom(mapView, "ViewContainer");
    var pan = new ReadyMap.Controls.Pan(mapView, "ViewContainer");

    // display the Lat/Long:
    mapView.addFrameEndCallback(function() {
        var viewMatrix = mapView.viewer.view.getViewMatrix();
        viewMatrix = osg.Matrix.inverse(viewMatrix);
        var eye = [];
        osg.Matrix.getTrans(viewMatrix, eye);
        var lla = map.profile.ellipsoid.ecef2lla(eye);
        lla[0] = Math.rad2deg(lla[0]);
        lla[1] = Math.rad2deg(lla[1]);
        jQuery("#Coords").html(
                "Lat: " + lla[1].toFixed(2) + "\u00B0" + "  Long = " + lla[0].toFixed(2) + "\u00B0" + "<br/>" +
                "Azim: " + Math.rad2deg(mapView.viewer.manipulator.localAzim).toFixed(1) + "\u00B0" +
                "  Pitch:" + Math.rad2deg(mapView.viewer.manipulator.localPitch).toFixed(1) + "\u00B0");
    });

    layerSwitcher = new ReadyMap.Controls.LayerSwitcher("LayerSwitcher", map);
    jQuery("#LayerSwitcher").draggable();
});
    

</script>
</head>

<body>
  <div id="header">
    <a href="http://pelicanmapping.com" border="0"><img id="logo" align="right" height="50" src="http://pelicanmapping.com/wp-content/uploads/2011/02/pelican-logo-262x93-light.png" /></a>
    <p>
        ReadyMap / WebGL :: 
        <a href="index.html">demos</a> ::
        <a href="http://godzi.org">wiki</a> :: 
        <a href="http://github.com/gwaldron/godzi-webgl">github</a> ::
        <a href="http://twitter.com/#!/pelicanmapping">twitter</a>
    </p>
    <div id="toolbar">
      <image src="../images/globe.gif" onclick="mapView.home();"/>
    </div>
  </div>
  <div id="ViewContainer">
    <canvas id="3DView"></canvas>
  </div>
  <div id="Help">
    <ul>
      <li>drag to pan</li>
      <li>wheel to zoom</li>
      <li>shift-drag to rotate</li>
      <li><a href="#" onclick="mapView.home();">reset view</a></li>
    </ul>   
    
    <div id="LayerSwitcher" class="ui-widget-content">
    </div>
   
  </div>
 
  <div id="Coords">
  </div>
</body>

</html>
